<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1100px"
      :before-close="handleClose"
      :show-close="false"
    >
      <div class="title">
        <span>用户导入</span>
      </div>
      <div class="content">
        <div class="tips">
          <span class="textTitle">要求：</span>
          <div class="item">
            <span>1. 专本科： 1-专科 2-本科</span>
            <span>2. 性别： 1-男 2-女 </span>
          </div>
          <div class="item">
            <span>3. 血型： 1-A 2-B 3-AB 4-O </span>
            <span>4. 政治面貌： 1-群众 2-团员 3-党员 </span>
          </div>
          <div class="item">
            <span>5.组织机构：机构id的数字，多个机构的话用顿号分割</span>
            <span>6.评分表：评分表id的数字，多个评分表的话用顿号分割</span>
          </div>
          <div class="item">
            <span
              >7.用户名称、密码、性别、身份类型、本人联系电话1为必填项。</span
            >
          </div>
          <span class="textTitle">例图：</span>
          <div class="item img">
            <el-image
              :src="require('@/assets/inputTips1.png')"
              :preview-src-list="[
                require('@/assets/inputTips1.png'),
                require('@/assets/inputTips2.png'),
              ]"
            >
            </el-image>
          </div>
          <!-- <span>要求：</span>
      <span>1. 专本科： 1-专科 2-本科</span>
      <span>2. 性别： 1-男 2-女 </span>
      <span>3. 血型： 1-A 2-B 3-AB 4-O </span>
      <span>4. 政治面貌： 1-群众 2-团员 3-党员 </span>
      <span>5.组织机构：机构id的数字，多个机构的话用顿号分割</span>
      <span>6.评分表：评分表id的数字，多个评分表的话用顿号分割</span>
      <span>7.用户名称、密码、性别、身份类型、本人联系电话1为必填项。</span>
      <span>例图：</span>
      <img src="@/assets/inputTips.png" alt=""> -->
        </div>
        <div class="text">
          <div class="textTitle">导入：</div>
          <div>
            <span>1.下载</span>
            <button>
              <a
                href="http://demo.zhihanyixing.com/file/template/用户(学生)导入模板.xlsx"
                >用户模板</a
              >
            </button>
            <span>按照模版的格式填写相关信息 </span>
          </div>
          <div class="sec">
            <span>2. 填写完成后，保存模版文档，然后 </span>
            <!-- <button >上传</button> -->
            <el-upload
              class="upload-demo"
              ref="upload"
              :headers="{ token: token }"
              action="http://test.zhihanyixing.com:8084/user/excel"
              :auto-upload="false"
              :show-file-list="false"
              :on-success="handleSuccess"
            >
              <button slot="trigger" @click="visible = false" class="sureBtn">
                上传
              </button>
            </el-upload>
          </div>
        </div>
        <div class="btn">
          <span></span>
          <button slot="reference" @click="closeDialog">取消</button>
          <button @click="submitUpload">确定</button>
          <span></span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      visible: false,
      token: '',
      url: '@/assets/inputTips.png',
      srcList: [
        'require("@/assets/inputTips.png")'
      ]
      // token: sessionStorage.getItem('userid')
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    openInput() {
      // console.log(111);
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    submitUpload() {
      this.$refs.upload.submit();
      this.dialogVisible = false;
    },
    // 文件上传成功回调
    handleSuccess(res, value) {
      console.log('12312313', res, value);
      if (res.code === 200) {
        this.$message({
          showClose: true,
          type: 'success',
          message: '上传成功'
        });
        this.$emit('getTableData');
      } else {
        // this.$message.error(res.msg);
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'error'
        });
      }
    }
  },
  created() {
    this.token = sessionStorage.getItem('usertoken');
  }
};
</script>

<style scoped lang="less">
button {
  cursor: pointer;
}
.title {
  height: 45px;
  width: 100%;
  background: #f1f5ff;
  text-align: center;
  line-height: 45px;
  span {
    font-size: 16px;
    color: #333333;
  }
}
.text {
  padding: 30px 22px;
  button {
    width: 100px;
    height: 26px;
    background: #2fc0e0;
    border-radius: 4px;
    color: white;
    margin: 0 10px;
  }
  span {
    font-size: 14px;
    color: #333333;
  }
  // div{
  //   &:nth-child(2){
  //     margin-top: 30px;
  //   }
  // }
  .sec {
    margin-top: 30px;
  }
}
.sureBtn {
  width: 50px;
  height: 30px;
  // line-height: 30px;
  background: #2fc0e0;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
}
.btn {
  // margin-top: 30px;
  // padding: 30px 50px;
  padding-bottom: 45px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  button {
    width: 100px;
    height: 35px;
    line-height: 35px;
    background: #e8f8fb;
    border-radius: 4px;
    font-size: 16px;
    color: #2fc0e0;
    &:nth-child(3) {
      color: white;
      background: #2fc0e0;
    }
  }
  div {
    width: 260px;
    display: flex;
    justify-content: space-between;
  }
  // .sec{
  //   margin-top: 30px;
  // }
}
.content {
  padding: 20px;
}
.tips {
  padding: 0 20px;
  .item {
    margin-bottom: 20px;
    span {
      display: inline-block;
      width: 48%;
    }
  }
  // .item{
  //   img:hover{
  //   // background-color: #2FC0E0;
  //   background:rgba(0,0,0,0.5);
  //   top:0;
  //   right:0;
  //   left:0;
  //   bottom:0;
  //   position:fixed;
  // }
  // }
}
.textTitle {
  font-size: 14px;
  color: #333333;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 20px;
}
/deep/.el-dialog__header,
/deep/.el-dialog__body {
  padding: 0;
}
.upload-demo {
  margin: 0;
  display: inline-block;
}
</style>
